<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端标准规范-v1.0 | 前端一锅煮</title>
    <meta name="description" content="前端标准规范-v1.0">
    <link rel="icon" href="/blog/logo.jpg">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-TileColor" content="#000000">
    <meta name="keywords" content="前端一锅煮,前端标准规范-v1.0">
    <link rel="preload" href="/blog/assets/css/0.styles.3a36f1f3.css" as="style"><link rel="preload" href="/blog/assets/js/app.2d50d9dc.js" as="script"><link rel="preload" href="/blog/assets/js/19.6362af40.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.cf06b472.js"><link rel="prefetch" href="/blog/assets/js/11.57a175c6.js"><link rel="prefetch" href="/blog/assets/js/12.b32f2db2.js"><link rel="prefetch" href="/blog/assets/js/13.818a88b3.js"><link rel="prefetch" href="/blog/assets/js/14.1c54dd87.js"><link rel="prefetch" href="/blog/assets/js/15.40ea867f.js"><link rel="prefetch" href="/blog/assets/js/16.379721e3.js"><link rel="prefetch" href="/blog/assets/js/17.0b8bcd15.js"><link rel="prefetch" href="/blog/assets/js/18.41bb3889.js"><link rel="prefetch" href="/blog/assets/js/2.55dfcea5.js"><link rel="prefetch" href="/blog/assets/js/20.4ce40a8a.js"><link rel="prefetch" href="/blog/assets/js/21.ba4dcc65.js"><link rel="prefetch" href="/blog/assets/js/22.d2fad5dd.js"><link rel="prefetch" href="/blog/assets/js/23.2a976f6d.js"><link rel="prefetch" href="/blog/assets/js/24.a6407b77.js"><link rel="prefetch" href="/blog/assets/js/25.28818591.js"><link rel="prefetch" href="/blog/assets/js/26.a4d6759f.js"><link rel="prefetch" href="/blog/assets/js/27.fe72fdf4.js"><link rel="prefetch" href="/blog/assets/js/28.ca4a85a9.js"><link rel="prefetch" href="/blog/assets/js/29.4c6c0c28.js"><link rel="prefetch" href="/blog/assets/js/3.e235257b.js"><link rel="prefetch" href="/blog/assets/js/30.6aa9a972.js"><link rel="prefetch" href="/blog/assets/js/31.b7bccc14.js"><link rel="prefetch" href="/blog/assets/js/32.3544b6a6.js"><link rel="prefetch" href="/blog/assets/js/33.3bb697fd.js"><link rel="prefetch" href="/blog/assets/js/34.ac7cecf3.js"><link rel="prefetch" href="/blog/assets/js/35.b26fe96f.js"><link rel="prefetch" href="/blog/assets/js/36.91eb88f8.js"><link rel="prefetch" href="/blog/assets/js/37.baa3c248.js"><link rel="prefetch" href="/blog/assets/js/4.04108111.js"><link rel="prefetch" href="/blog/assets/js/5.2e3bc3e6.js"><link rel="prefetch" href="/blog/assets/js/6.88208dc4.js"><link rel="prefetch" href="/blog/assets/js/7.7913f494.js"><link rel="prefetch" href="/blog/assets/js/8.64ff3aa5.js"><link rel="prefetch" href="/blog/assets/js/9.43d70a25.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.3a36f1f3.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">前端一锅煮</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="/blog/page/list/" class="nav-link router-link-active">全部文章</a></div><div class="nav-item"><a href="/blog/page/vuepress/" class="nav-link">VuePress笔记</a></div><div class="nav-item"><a href="/blog/page/about/" class="nav-link">关于我</a></div> <a href="https://gitee.com/cjm0/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="/blog/page/list/" class="nav-link router-link-active">全部文章</a></div><div class="nav-item"><a href="/blog/page/vuepress/" class="nav-link">VuePress笔记</a></div><div class="nav-item"><a href="/blog/page/about/" class="nav-link">关于我</a></div> <a href="https://gitee.com/cjm0/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>前端标准规范-v1.0</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/blog/page/list/fe.html#文件组织规范" class="sidebar-link">文件组织规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/page/list/fe.html#文件结构" class="sidebar-link">文件结构</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/fe.html#文件命名" class="sidebar-link">文件命名</a></li></ul></li><li><a href="/blog/page/list/fe.html#js-规范" class="sidebar-link">JS 规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/page/list/fe.html#js-书写格式" class="sidebar-link">JS 书写格式</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/fe.html#js-命名" class="sidebar-link">JS 命名</a></li></ul></li><li><a href="/blog/page/list/fe.html#css-规范" class="sidebar-link">CSS 规范</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/fe.html#html-规范" class="sidebar-link">HTML 规范</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/fe.html#性能优化" class="sidebar-link">性能优化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/page/list/fe.html#提交代码前检查" class="sidebar-link">提交代码前检查</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/fe.html#优化速度" class="sidebar-link">优化速度</a></li></ul></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="前端标准规范-v1-0"><a href="#前端标准规范-v1-0" class="header-anchor">#</a> 前端标准规范-v1.0</h1> <p>总体原则：极简、极快、解耦</p> <p>主要适用范围：vue 单页项目+</p> <h2 id="文件组织规范"><a href="#文件组织规范" class="header-anchor">#</a> 文件组织规范</h2> <h3 id="文件结构"><a href="#文件结构" class="header-anchor">#</a> 文件结构</h3> <p>原则：文件少、层级浅、资源集中、相对独立互不影响</p> <p>基本结构：</p> <div class="language- extra-class"><pre class="language-text"><code>.
|_ node_modules
|_ dist
|_ src
    |_ assets // 公共资源
        |_ img // 全局图片
            |- favicon.png
        |- common.js // 全局公用 js
        |- common.less // 重置样式表 + 自定义全局样式
        |- mixin.less // 全局 less 变量
        |- template.html // 模板
    |_ components // 组件
        |_toast 
            |- index.vue 
            |- index.less
        |- index.js // 所有组件的集合
    |_ pages // 具体页面
        |_ index // 首页
            |- index.vue
            |- index.less
            |- good.png // 少量本页面下独自使用的图片
        |- img // 两个以上页面都用到的图片单独抽离防止
            |- copy.jpg
        |_ temp // 模板
            |- index.vue
            |- index.less
    |_ router // 路由
        |- index.js
    |_ vuex // vuex 插件
        |- index.js
    |- App.vue 
    |- main.js
</code></pre></div><p>说明：</p> <ol><li><p>关于图片：少量直接放到本页面文件下（资源集中，互不影响），有两个页面以上公用则抽离放到 img 文件夹下（降低层级），assets 下的 img 主要放 favicon.png、pwa等全局图片（低频资源远离，不分散注意力）</p></li> <li><p>assets 目录：放全局资源，此类资源辐射全局，改动频率低，集中在一起，为更好地聚焦核心</p></li> <li><p>temp 文件：不用新建页面，直接复制然后改个文件名即可</p></li></ol> <h3 id="文件命名"><a href="#文件命名" class="header-anchor">#</a> 文件命名</h3> <p>文件命名统一使用小写字母，必要的时候可以加中划线 <code>-</code></p> <p>页面文件名不宜过长，里面的文件统一以 index 为前缀，<code>index.vue、index.less</code></p> <p>父子组件命名：</p> <div class="language- extra-class"><pre class="language-text"><code>    |_ button-group // 组件组合
    |_ button // 组件
    |_ cell // 父组件
    |_ cell-item // 子组件
</code></pre></div><h2 id="js-规范"><a href="#js-规范" class="header-anchor">#</a> JS 规范</h2> <h3 id="js-书写格式"><a href="#js-书写格式" class="header-anchor">#</a> JS 书写格式</h3> <p>借助 Eslint 以及编辑器的代码格式化功能确保代码格式统一</p> <p>Eslint 使用 <a href="https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md" target="_blank" rel="noopener noreferrer">JavaScript standard 代码规范<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h3 id="js-命名"><a href="#js-命名" class="header-anchor">#</a> JS 命名</h3> <ol><li><p>全部用单引号</p></li> <li><p>统一用驼峰命名法，尽量保持语义化</p></li> <li><p>类名开头大写</p></li> <li><p>合理使用复数、简称、缩写</p></li> <li><p>多写注释，同时保持精炼</p></li></ol> <h2 id="css-规范"><a href="#css-规范" class="header-anchor">#</a> CSS 规范</h2> <p>规则：全部用双引号，小写。每个页面的 css 命名以文件外层文件夹名字加 <code>_index</code> 作为开头（所以说一开始文件夹名字不宜过长），统一使用下划线辅助 <code>_</code></p> <p>比如：</p> <div class="language-css extra-class"><pre class="language-css"><code>    <span class="token selector">.about_index</span><span class="token punctuation">{</span>
        <span class="token selector">.tit</span><span class="token punctuation">{</span>
            <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span> 
        <span class="token punctuation">}</span>
        <span class="token selector">.nav</span><span class="token punctuation">{</span>
            <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 20PX<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre></div><p>原因：下划线易选中复制，js 中不允许有中划线，js 操作类名夹带中划线互相混在一起，加重记忆负担，容易混淆；文件名称都是不重复的，以文件名作为此页面类名的开头可以确保不会有重复，然后此类名下的命名可与其他页面重复，依靠层级限制类名可重复使用，极大减轻样式命名的工作量</p> <h2 id="html-规范"><a href="#html-规范" class="header-anchor">#</a> HTML 规范</h2> <ol><li><p>增强语义化：尽量使用 h5 新标签</p></li> <li><p>标签嵌套规则，防止诡异错误：<code>ul、ol</code> 下嵌套 <code>li</code>，<code>dl</code> 下嵌套<code>dt、dd</code>，<code>p、dt、h</code>标签里面不嵌套块元素，<code>a</code> 标签不能嵌套 <code>a</code>，行内元素不能嵌套块元素</p></li> <li><p>注意 seo 优化：<code>img、a、strong、em、h1-h3</code></p></li> <li><p>格式化标签：<code>span、em、strong</code> 格式化成无语义标签，<code>i</code> 统一给图标使用</p></li> <li><p>全部用双引号，小写</p></li></ol> <h2 id="性能优化"><a href="#性能优化" class="header-anchor">#</a> 性能优化</h2> <h3 id="提交代码前检查"><a href="#提交代码前检查" class="header-anchor">#</a> 提交代码前检查</h3> <ol><li>图片</li></ol> <p>必须加 favicon</p> <p>有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现</p> <p>ps 中的切图 jpg 品质取非常高(80)，然后用 PPDuck 压图工具做无损压缩</p> <p>尽量使用 jpg 的图，移动端大张图片不大于 50kb</p> <p>移动端使用 2x 图</p> <p>避免空的 src 和 href</p> <ol start="2"><li><p>a 标签 href 如果为空，统一使用 <code>&quot;javascript:;&quot;</code> 而非 <code>&quot;void(0)&quot;</code></p></li> <li><p><code>border-radius: 2px</code> 值不能为单数，最小为 <code>2px</code></p></li> <li><p>定位元素垂直居中 <code>top</code> 值一般写 <code>45%</code>，<code>50%</code> 看起来会偏下</p></li> <li><p>合理的鼠标光标</p></li> <li><p>节流防抖</p></li> <li><p>类型转换、非空判断</p></li> <li><p>异步请求空白处理机制，比如加载 loading</p></li> <li><p>统一的错误返回处理机制</p></li> <li><p>微信分享标题敏感字，红包、钱...</p></li> <li><p>app回退、跳转是否正确 <code>iOS、android</code></p></li> <li><p>适配需要考虑 <code>320~750 320 480 640 iphoneX</code> 等</p></li> <li><p>扩大点击区域</p></li></ol> <h3 id="优化速度"><a href="#优化速度" class="header-anchor">#</a> 优化速度</h3> <ol><li><p>页面首次打开请求接口不可超过3个，过多请求需要整合</p></li> <li><p>控制域名数量，每个页面请求域名一般有3个，一个主域名，一个静态资源域名，一个埋点分析域名（存在资源并行下载数限制的问题）</p></li> <li><p>综合衡量 <code>css、js</code> 的请求数量和包大小，超过 150kb 考虑做拆分</p></li> <li><p>后端接口做缓存</p></li> <li><p>静态资源统一部署到 CDN</p></li> <li><p>开启 zip 压缩</p></li></ol></div> <div class="page-edit"><div class="edit-link"><a href="https://gitee.com/cjm0/blog/edit/master/docs/page/list/fe.md" target="_blank" rel="noopener noreferrer">在 Gitee 上编辑此页</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></div> <!----> </div> <!----></div></div>
    <script src="/blog/assets/js/app.2d50d9dc.js" defer></script><script src="/blog/assets/js/19.6362af40.js" defer></script>
  </body>
</html>
